<%@ page import="java.util.List" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>考试中</title>
    <script src="../js/jquery.min.js"></script>
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
</head>
<style>
    /* 标题栏样式*/
    .title {
        text-align: center;
    }

    .e1 {
        display: inline-block;
        margin-left: 10px;
        width: 100px;
        height: 25px;
        background-color: rgb(231, 231, 231);
        text-align: center;
        line-height: 25px;
        font-size: 12px;
        margin-top: 8px;
    }

    .examtime {
        margin-top: 10px;
        color: rgb(211, 211, 211);
        font-size: 12px;
    }

    /* 试题内容栏样式 */
</style>

<body>
<!-- 标题栏 -->
<div class="title">
    <h1>${examquestionlist.get(0).exam_name}</h1>
    <div class="exam_time_limit e1">时长:${examquestionlist.get(0).exam_time_limit}分钟</div>
    <div class="exampaper_score e1">总分：${examquestionlist.get(0).exampaper_score}分</div>
    <div class="exampaper_passscore e1">及格分:${examquestionlist.get(0).exampaper_passscore}分</div>
    <div class="examtime">${exam_start_date} 至 ${exam_end_date}</div>
</div>
<!-- 试题内容栏 查看题型 进行分类-->
<form class="layui-form" action="" style="padding: 20px;position: relative;">
    <div style="padding: 20px; background-color: #F2F2F2;">
        <div class="layui-row layui-col-space15">
            <%--            begin="1"  end="${examquestioncount}"--%>
            <%--                        <c:forEach  items="${examquestionlist}" varStatus="i">--%>
            <!-- *********选择题******* -->
            <div style="margin-bottom:10px;">
                <span style="font-size: large;">一、单选题</span>
                <c:forEach var="examquestion" items="${examquestionlist}">
                    <c:if test="${examquestion.question_type=='单选题'}">
                        <%--                        <c:forEach  items="${examquestionlist}" varStatus="i">--%>
                        <%--<c:out value="${examquestion.question_type}" default="单选题" escapeXml="flase"></c:out>--%>
                        <div class="layui-col-md12" style=" margin-top:10px;">
                            <div class="layui-card">
                                <div class="layui-card-header">${examquestion.question_id}、${examquestion.question_content}(${examquestion.question_score}分)</div>
                                <div class="layui-card-body">A、${examquestion.question_optiona}</div>
                                <div class="layui-card-body">B、${examquestion.question_optionb}</div>
                                <div class="layui-card-body">C、${examquestion.question_optionc}</div>
                                <div class="layui-card-body">D、${examquestion.question_optiond}</div>
                                <div class="layui-card-body">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">请选择：</label>
                                        <div class="layui-input-block">
                                            <input type="radio" name="${examquestion.question_id}"
                                                   value="A"
                                                   title="A">
                                            <input type="radio" name="${examquestion.question_id}"
                                                   value="B"
                                                   title="B">
                                            <input type="radio" name="${examquestion.question_id}"
                                                   value="C"
                                                   title="C">
                                            <input type="radio" name="${examquestion.question_id}"
                                                   value="D"
                                                   title="D">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <%--                        </c:forEach>--%>
                    </c:if>
                </c:forEach>

            </div>

            <!-- *********多选题******* -->

            <div style="margin-bottom:10px;">
                <span style="font-size: large;">二、多选题</span>
                <c:forEach var="examquestion" items="${examquestionlist}">
                    <c:if test="${examquestion.question_type=='多选题'}">
                        <%--                        <c:forEach  items="${examquestionlist}" varStatus="i">--%>
                        <div class="layui-col-md12" style=" margin-top:10px;">
                            <div class="layui-card">
                                <div class="layui-card-header">${examquestion.question_id}、${examquestion.question_content}(${examquestion.question_score}分)</div>
                                <div class="layui-card-body">A、${examquestion.question_optiona}</div>
                                <div class="layui-card-body">B、${examquestion.question_optionb}</div>
                                <div class="layui-card-body">C、${examquestion.question_optionc}</div>
                                <div class="layui-card-body">D、${examquestion.question_optiond}</div>
                                <div class="layui-card-body">
                                    <div class="layui-form-item" pane="">
                                        <label class="layui-form-label">请选择：</label>
                                        <div class="layui-input-block">
                                            <input type="checkbox" name="${examquestion.question_id}" lay-skin="primary"
                                                   value="A"
                                                   title="A"
                                                   checked="">
                                            <input type="checkbox" name="${examquestion.question_id}" lay-skin="primary"
                                                   value="B"
                                                   title="B">
                                            <input type="checkbox" name="${examquestion.question_id}" lay-skin="primary"
                                                   value="C"
                                                   title="C">
                                            <input type="checkbox" name="${examquestion.question_id}" lay-skin="primary"
                                                   value="D"
                                                   title="D">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <%--                        </c:forEach>--%>
                    </c:if>
                </c:forEach>
            </div>

            <!-- *********判断题******* -->

            <div style="margin-bottom:10px;">
                <span style="font-size: large;">三、判断题</span>
                <c:forEach var="examquestion" items="${examquestionlist}">
                    <c:if test="${examquestion.question_type=='判断题'}">
                        <%--                        <c:forEach  items="${examquestionlist}" varStatus="i">--%>
                        <div class="layui-col-md12" style=" margin-top:10px;">
                            <div class="layui-card">
                                <div class="layui-card-header">${examquestion.question_id}、${examquestion.question_content}(${examquestion.question_score}分)</div>
                                <div class="layui-card-body">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">请选择：</label>
                                        <div class="layui-input-block">
                                            <input type="radio" name="${examquestion.question_id}"
                                                   value="T"
                                                   title="对" checked="">
                                            <input type="radio" name="${examquestion.question_id}"
                                                   value="F"
                                                   title="错">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <%--                        </c:forEach>--%>
                    </c:if>
                </c:forEach>
            </div>

            <!-- *********填空题******* -->

            <div style="margin-bottom:10px;">
                <span style="font-size: large;">四、填空题</span>
                <c:forEach var="examquestion" items="${examquestionlist}">
                    <c:if test="${examquestion.question_type=='填空题'}">
                        <%--                        <c:forEach  items="${examquestionlist}" varStatus="i">--%>
                        <div class="layui-col-md12" style=" margin-top:10px;">
                            <div class="layui-card">
                                <div class="layui-card-header">${examquestion.question_id}、${examquestion.question_content}(${examquestion.question_score}分)</div>
                                <div class="layui-card-body">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">请填写：</label>
                                        <div class="layui-input-block">
                                            <input type="text" id="${examquestion.question_id}" lay-verify="title"
                                                   autocomplete="off" placeholder="请输入你的答案"
                                                   class="layui-input">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <%--                </c:forEach>--%>
                    </c:if>
                </c:forEach>
            </div>


            <!-- *************简答题、论述题************ -->
            <%--   <div style="margin-bottom:10px;">
                   <span style="font-size: large;">五、简答题</span>
                   <div class="layui-col-md12" style=" margin-top:10px;">
                       <div class="layui-card">
                           <div class="layui-card-header">7、算法的特点？(10分)</div>
                           <div class="layui-card-body">
                               <div class="layui-form-item layui-form-text">
                                   <label class="layui-form-label">请填写：</label>
                                   <div class="layui-input-block">
                                           <textarea placeholder="请输入答案"
                                                     class="layui-textarea"></textarea>
                                   </div>
                               </div>
                           </div>
                       </div>
                   </div>
               </div>--%>
            <!-- ********************************** -->
            <%--                        </c:forEach>--%>
        </div>
    </div>


    <button type="button" class="layui-btn" lay-submit="" lay-filter="demo1"
            style="margin-top: 10px;position: relative;left: 1000px;" onclick="examsubmit()">立即提交
    </button>


</form>

<!-- 倒计时 -->
<div style="position: fixed;top: 100px;right:50px;background-color: whitesmoke;width: 180px;height: 80px;">
    <div class="djs" style="font-size: large;">
        <div style="color: rgb(75, 75, 75);text-align: center;">距离考试结束还有</div>
        <div id="timer1" style="color: gray;text-align: center;line-height: 50px;"></div>
    </div>
</div>
</body>
<script src="../layui/layui.js"></script>
<script>
    layui.use(['element', 'form', 'layedit', 'laydate', 'laypage', 'layer'], function () {
        var $ = layui.jquery,
            element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
        var form = layui.form,
            layer = layui.layer,
            layedit = layui.layedit,
            laydate = layui.laydate;
        var laypage = layui.laypage,
            layer = layui.layer;
        //执行一个laydate实例
        laydate.render({
            elem: '#beginTime' //指定元素
        });
        laydate.render({
            elem: '#endTime' //指定元素
        });
    })


    //状态的变化 页面加载完成且提交按钮未被点击
    /* $(function () {
         //   7200 120分钟 从数据库获得
         countDown(60, function (msg) {
             document.getElementById('timer1').innerHTML = msg;
         })
         if(isclick==false){

         }
     });*/

    // var isclick=false;
    console.log(${examquestionlist.get(0).exam_time_limit})
    let limitTime=${examquestionlist.get(0).exam_time_limit};
    var timeuse = limitTime*60;
    //*************** 倒计时*****************
    var timer = setInterval(function () {
        if (!!timeuse) {
            hour = Math.floor((timeuse % 86400) / 3600),
                minutes = Math.floor((timeuse % 3600) / 60),
                seconds = Math.floor(timeuse % 60),
                msg = hour + "时" + minutes + "分" + seconds + "秒";
            document.getElementById('timer1').innerHTML = msg;
            --timeuse;
            // if(isclick==true){
            //     clearInterval(timer);
            //     document.getElementById('timer1').innerHTML = "提交!";
            // }
        } else {
            clearInterval(timer);
            document.getElementById('timer1').innerHTML = "时间到,考试结束!";

        }
    }, 1000);
    /*    function countDown(maxtime, fn) {
            var timer = setInterval(function () {
                if (!!maxtime) {
                    //  var day = Math.floor(maxtime / 86400),
                    hour = Math.floor((maxtime % 86400) / 3600),
                        minutes = Math.floor((maxtime % 3600) / 60),
                        seconds = Math.floor(maxtime % 60),
                        msg = hour + "时" + minutes + "分" + seconds + "秒";
                    fn(msg);
                    --maxtime;
                } else {
                    clearInterval(timer);
                    fn("时间到,考试结束!"); //结束执行某个提交函数

                }
            }, 1000);
        }*/

    //提交试卷判断成绩函数
    //获取题答案并且本地存
    function examsubmit() {
        // isclick=true;
        clearInterval(timer);
        document.getElementById('timer1').innerHTML = "提交!";
        var time = Math.ceil(limitTime-timeuse / 60);

        var score = 0;//成绩
        var stu${user_id}${examquestionlist.get(0).exampaper_id} = {
            stid:${user_id},
            examid:${examquestionlist.get(0).exam_id},
            exampaperid:${examquestionlist.get(0).exampaper_id},
            examname: "${examquestionlist.get(0).exam_name}",
            examscore: score,
            examuserTime: time,//考试用时
            answer: []
        }
        console.log("${examquestionlist}")

        <c:forEach var="examquestion" items="${examquestionlist}">
        <c:if test="${examquestion.question_type=='单选题'}">
        var obj = document.getElementsByName("${examquestion.question_id}");
        console.log(obj.length);
        for (var i = 0; i < obj.length; i++) {
            if (obj[i].checked) {
                console.log(obj[i].value);
                if (obj[i].value == "${examquestion.question_answer}") {
                    score = score +${examquestion.question_score};//进行成绩的判断
                }
                stu${user_id}${examquestionlist.get(0).exampaper_id}.answer[${examquestion.question_id}] = obj[i].value;
            }
        }
        </c:if>
        <c:if test="${examquestion.question_type=='多选题'}">
        var obj = document.getElementsByName("${examquestion.question_id}");
        <%--var obj = $('#${examquestion.question_id}').val();--%>
        console.log(obj.length);
        var check_val=[];
        for (var i = 0; i < obj.length; i++) {
            if (obj[i].checked) {
                console.log(obj[i].value);
                check_val.push(obj[i].value)
            }
        }
        var ans = null;
        console.log("多选题数组："+check_val)
        for (var j = 0; j < check_val.length; j++) {
            ans = ans + check_val[i];
        }
        if (ans == "${examquestion.question_answer}") {
            score = score +${examquestion.question_score};
        }
        stu${user_id}${examquestionlist.get(0).exampaper_id}.answer[${examquestion.question_id}] = check_val;
        </c:if>
        <c:if test="${examquestion.question_type=='判断题'}">
        var obj = document.getElementsByName("${examquestion.question_id}");
        console.log(obj);
        console.log(obj.length);
        for (var i = 0; i < obj.length; i++) {
            if (obj[i].checked) {
                console.log(obj[i].value);
                if (obj[i].value == "${examquestion.question_answer}") {
                    score = score +${examquestion.question_score};
                }
                stu${user_id}${examquestionlist.get(0).exampaper_id}.answer[${examquestion.question_id}] = obj[i].value;
            }
        }
        </c:if>
        <c:if test="${examquestion.question_type=='填空题'}">
        <%--var obj = $("#{examquestion.question_id}").val();--%>
        var obj=document.getElementById("${examquestion.question_id}");
        console.log(obj.value)
        if (obj.value == "${examquestion.question_answer}") {
            score = score +${examquestion.question_score};
        }
        stu${user_id}${examquestionlist.get(0).exampaper_id}.answer[${examquestion.question_id}] = obj.value;

        </c:if>
        </c:forEach>

        console.log("考试分数：" + score);
        console.log("考试用时：" + time);
        console.log("学生答题对象：" + stu${user_id}${examquestionlist.get(0).exampaper_id})
        stu${user_id}${examquestionlist.get(0).exampaper_id}.examscore=score;
        var str = JSON.stringify(stu${user_id}${examquestionlist.get(0).exampaper_id});//JSON-》字符串
        localStorage.setItem("stu${user_id}${examquestionlist.get(0).exampaper_id}", str);//本地存

        //修改本场考试成绩与考试使用时间
          location.href ="/OnlineExam/admin/stuexam?m=updateexamstateifsubmit&examrecord_id=${examrecord_id}&exam_score="+score+"&exam_usetime="+time;

    }


</script>

</html>